<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        // let obj = {}
        // // Object.defineProperty  不能监听数组
        // Object.defineProperty(obj, "name", {
        //     get() {
        //         console.log('name ---- get')
        //         return "张三"
        //     },
        //     set() {
        //         console.log('对name进行赋值了')
        //     }
        // })
        // console.log(obj)

        // let arr = []
        // // 在vue2中数组的方法做了二次处理(变异方法)
        // Object.defineProperty(arr, 1, {
        //     get() {
        //         // console.log('name ---- get')
        //         return 1
        //     },
        //     set() {
        //         console.log('对name进行赋值了')
        //     }
        // })



        // // console.log(arr)

        // Array.prototype.push = () => {
        //     console.log('push方法重写了')
        // }

        // arr.push(2)
        // console.log(arr)




        // Vue3 响应式原理  Proxy

        var arr = new Proxy([], {
            get: function (target, propKey, receiver) {
                console.log(`getting ${propKey}!`);
                return Reflect.get(target, propKey, receiver);
            },
            set: function (target, propKey, value, receiver) {
                console.log(`setting ${propKey}!`);
                return Reflect.set(target, propKey, value, receiver);
            }
        });

        arr.length = 10
        
        // arr.push(123)


        let str = 123

    </script>
</body>

</html>